<template>
	<span class="lazy_img">
		<img :src="imgsrc" />
		<img :src="dataSrc" @load="imgLoadHandle($event, 'loaded')" @error="imgLoadHandle($event, 'error')" class="hidden_img" v-if="isShow" />
	</span>
</template>
<script>
	export default {
		name: "LazyImg",
		props:["src", "dataSrc"],
		data: function(){
			return {
				imgsrc: this.src,
				isShow: true
			}
		},
		methods:{
			imgLoadHandle(e,type){
				type === 'loaded' && this.$set(this, 'imgsrc', this.dataSrc);
				this.$set(this, 'isShow', false);
			}
		}
	}
</script>
<style lang="less">
	@base 23.44/1rem;
	.lazy_img{
		img{
			&.hidden_img{
				display:none;
			}
		}
	}
</style>